<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>KineticJS Viewport Demo</title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">

  <script src="js/libs/jquery-1.7.1.min.js"></script>
  
  <script src="js/libs/jquery.mousewheel.js"></script>
    
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
  
    <script src="js/libs/kinetic-v3.8.1.js"></script>
    
    <!-- rgb might not be needed by canvg -->
    <script src="js/libs/rgbcolor.js"></script>
    
    <!-- canvg can parse svg -->
    <script src="js/libs/canvg.js"></script>
    
	<script src="js/variable-time-step-loop-1.0.0.js"></script>
	
	<script src="js/kineticjs.viewport-v1.0.0.js"></script>
	
	<script src="js/demo.js"></script>
	
</head>
<body onmousedown="return false;">
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>
  		<div class="page-width">
			<h1>KineticJS Prototype</h1>
		</div>
  </header>
  <div role="main">
    	<div class="page-width">

			<div id="viewport">
			</div>

		</div>
  </div>
  <footer>
  		<div class="page-width">
          The inner gray square represents the clipping rectangle, which would be the edges of what you display. The additional area is shown to demonstrate how it's clipping. Notice as well that hovering over a circle will correctly trigger the hover event, no matter the zoom or offset.
          <br />Use the arrow keys to move around and the mouse wheel to zoom in/out.
          <br />Andrew Lundgren
		</div>
  </footer>
</body>
</html>
